<template>
  <div class="wrapper">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide class="box" v-for="item in imgUrl" :key="item.id"><img :src="item.url" alt=""></swiper-slide>

      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
      <div class="swiper-scrollbar"   slot="scrollbar"></div>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'//引入样式
  import { swiper, swiperSlide } from 'vue-awesome-swiper'//使用组件
  export default {
      name: 'Swiper',
      props:{
        swiper:Array
      },
      components:{//注册组件
        swiper,
        swiperSlide
      },
      data() {
        return {
          swiperOption: {
            // some swiper options/callbacks
            // 所有的参数同 swiper 官方 api 参数
            pagination:".swiper-pagination",
            loop:true,
            autoplay:2000000
          },
          imgUrl:[
            {id:"001",url:"//mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201910/abe3418971067bd655fb2794d6e2eeec.jpg"},
            {id:"002",url:"//imgs.qunarzz.com/vc/aa/9e/82/14bf523635542806a671763e98.jpg_92.jpg"},
            {id:"003",url:"//mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20198/b59b8db9f72eb8f54df5bf2155672e9c.jpg"},
            {id:"004",url:"//mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20199/76e68eda4ed089c0e5b0ce2367efe428.jpg"}
          ]
        }
      }
    }
</script>

<style lang="stylus" scoped="scoped">
  .wrapper  >>> .swiper-pagination-bullet-active{
    background white;
  }
    .wrapper{
      width 100%;
      overflow hidden;
      height 0;
      padding-bottom 28.66666%;
      .box{
        touch-action none
        img{
          width 100%
        }
      }
    }
</style>
